/* === v-tag === */

.v-tag {
  background-color: @tag-fill;
  display: inline-block;
  padding: @tag-padding;
  height: 24px;
  line-height: 22px;
  font-size: @tag-font-size;
  color: @tag-color;
  border-radius: @tag-border-radius;
  box-sizing: border-box;
  border: 1px solid transparent;
  white-space: nowrap;
  .v-icon-close {
    border-radius: 50%;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    transform: scale(.75, .75);
    height: 18px;
    width: 18px;
    line-height: 18px;
    vertical-align: middle;
    top: -1px;
    right: -2px;
    &:hover {
      background-color: @white;
      color: @tag-fill;
    }
  }
  .colorTags(@fill, @border, @color) {
    background-color: @fill;
    border-color: @border;
    color: @color;
    &.is-hit {
      border-color: @color;
    }
    .v-tag__close:hover {
      background-color: @color;
      color: @white;
    }
  }
  &--gray {
    .colorTags(@tag-gray-fill, @tag-gray-border, @tag-gray-color);
  }
  &--primary {
    .colorTags(@tag-primary-fill, @tag-primary-border, @tag-primary-color);
  }
  &--success {
    .colorTags(@tag-success-fill, @tag-success-border, @tag-success-color);
  }
  &--warning {
    .colorTags(@tag-warning-fill, @tag-warning-border, @tag-warning-color);
  }
  &--danger {
    .colorTags(@tag-danger-fill, @tag-danger-border, @tag-danger-color);
  }
}
